<template>
  <div class="container">
      <div class="actpic">
          <img :src="info.thumb" alt="" mode="aspectFill">
          <div class="report">
              <report :info="info" type="2" model="1"></report>
          </div>
      </div>
      <div class="yellow weui-cell">
         <div class="weui-cell__bd">
           会员减{{info.discount}}元
         </div>
         <div class="weui-cell__ft" v-if="info.start">
            <span>仅剩</span> <i v-if="info.current_nums" style="display:inline">{{info.current_nums}}</i> <i style="display:inline" v-else>{{info.nums}}</i> <span>人</span>
         </div>
         <div class="weui-cell__ft" v-else>
            <span>距开抢</span> {{h}} <span> : </span>{{m}}<span> : </span>{{s}}
         </div>
      </div>
      <div class="weui-cell">
        <div class="weui-cell__bd">
            <div class="classname">{{info.title}}</div>
            <div class="price">￥{{info.price}}<span>￥{{info.prime_price}}</span></div>
        </div> 
        <div class="weui-cell__ft share" @click="share">
            <van-icon name="share" color="#1A84FB" size="23px"/>
            <p>邀请好友</p>
        </div>
      </div>
      <div class="lian"></div>
      <div class="weui-cell user">
         <div class="weui-cell__hd">
              <avatar :avatar="info.user.avatar" 
                      :Level="info.user.partner_level" 
                      :userId="info.user.id" 
                      :isAuth="info.user.is_auth" 
                      :isPartner="info.user.is_partner"></avatar>
         </div>
         <div class="weui-cell__bd">
             <span class="nickname">{{info.user.nickname}}</span>
         </div>
         <div class="weui-cell__ft">
              <!-- <div class="toSend" @click="chatTo(info.user)">私信</div>  -->
              <chatBtn :userInfo="info.user"/>
         </div>
         <div class="weui-cell__ft">
              <Follow :info="info" :userId="info.user.id" ></Follow>
         </div>
      </div>
      <div class="adr weui-cell">
          <div class="weui-cell__hd"><img src="/static/images/ic_location@2x.png" class="adrIcon"/>位置：</div> 
          <div class="weui-cell__bd">{{info.address}}</div>
      </div>
      <div class="pin">
           <van-tabs @change="onClick" :active="active" sticky >
            <van-tab
              v-for="(item,index) in pinNav"
              :title="item.name"
              :key="index"
            >
                <classTit :title="item.name"></classTit>
                <div v-if="index==0">
                     <div class="content">
                          <wxParse :content="info.content"/>
                     </div>
                </div>
                <div v-if="index==1">
                    <evaluate  :type="2" @selCom="selCom" :Comment="Comment"></evaluate>
                </div>
            </van-tab>
          </van-tabs>
          <div class="kong"></div>
          <div class="footer">
              <van-goods-action>
                <van-goods-action-icon
                  icon="wap-home"
                  text="首页"
                  @click="toIndex"
                />
                <van-goods-action-icon
                  :icon="info.is_collect?'star':'star-o'"
                  text="收藏"
                  color="#1A84FB"
                  open-type="getUserInfo" 
                  @getuserinfo="bindGetUserInfo($event,info,2)"
                />
                
                <div class="btn btn1"  v-if="info.start">
                    <van-button class="appppp" type="" open-type="getUserInfo" @getuserinfo="bindGetUserInfo($event,info,1)">
                        <div class="prices">立即抢课</div>
                    </van-button>
                </div>
                <div class="btn " v-else><div class="prices">即将开始</div></div>
              </van-goods-action>
          </div>
      </div>
  </div>
</template>

<script>
import wxParse from 'mpvue-wxparse'
import swiper from "@/components/swiper";
import top from "@/components/top"
import navList from "@/components/nav";
import courseList from "@/components/list";
import classTit from "@/components/classTit";
import evaluate from "@/components/evaluate"
import chatBtn from "@/components/chatBtn"
import Follow from "@/components/follow"
import avatar from "@/components/avatar"
import {rushinfo} from "@/api/rush"
import { xdLogin } from "@/utils/login"
import {like} from "@/api/operate.js"
import { collectA } from "@/api/operate";
import { eva_list } from "@/api/evaluate";
export default {
  components: {
      chatBtn,
      swiper,
      top,
      navList,
      courseList,
      classTit,
      evaluate,
      Follow,
      avatar,
      wxParse
  },

  data () {
    return {
      currentStar:"0",
      isfollowed:1,
      active:0,
      show:false,
      type:"",
      pinNav:[
        {name:"课程介绍",id:"1"},
        {name:"用户评价",id:"2"},
      ],
      classTags:[],
      h:"",
      m:"",
      s:"",
      currentTags:0,
      member: [],
      info:{},
      starTime:"",
      endTime:"",
      is_begin:"",
      rushid:"",
      startTime:"",
      selComId:0,
      Comment:[],
      load1:false,
      currentPage:1,
      queS2:false,
      user_id:0
    }
  },
  methods:{
    bindGetUserInfo(e,info,type){
  // type==1 立即抢购
  // type==2 dizan
        wx.getStorage({
            key: 'token',
            success: (result) => {
                if(type==2)  {
                    this.toCollect(info)
                } else if(type==1) {
                    this.topinList(info)
                }
            },
            fail: () => {
                xdLogin(e).then((res)=>{
                    if(type==2)  {
                    this.toCollect(info)
                } else if(type==1) {
                    this.topinList(info)
                }
                })
            },
            complete: () => {}
        });
          
        console.log(e,info)
        
      
    },
    chatTo(item) {
        wx.navigateTo({
            url: '/pages/chatOnLine/main?info=' + JSON.stringify(item)
        })
    },
    
    share(){
        wx.navigateTo({
          url:"/pages/shareKc/main?type=6&id="+this.info.id
        })
    },
    popup(type){
       this.type=type;
       this.show=true
    },
    close(){
      this.show=false
    },
    toCollect(info){
      console.log(11)
       let data={};
        data.id=info.id
        data.type=6;
        collectA(data).then(res=>{
            info.is_collect=!(info.is_collect)
        })
        console.log(info)
    },
    onClick(e){
       let idx= e.target.index;
        this.active=idx;
        console.log(e)
        if(idx==1){
          if(this.Comment.length==0){
              this.getComment()
           }
        }
    },
    follow(item){
       let guan=item.guan;
       item.guan=!guan
    },
    toIndex(){
        let url="../index/main";
        console.log(mpvue)

        mpvue.switchTab({url})
    },
    topinList(item){
      delete item.content;
      console.log(item)
      let info=JSON.stringify(item)
      
      let url="../bargainorder/main?info="+info;
      mpvue.navigateTo({url});
    },
    report(userId,classId) {
        console.log(userId,classId)
        wx.showActionSheet({
            itemList: ['举报'],
            success (res) {
                console.log(res.tapIndex)
            },
            fail (res) {
                console.log(res.errMsg)
            }
        })
    },
    countTime() {
      var date = new Date();
      var now = date.getTime();
      var end=new Date(this.startTime);
      var endtime=end.getTime();
      var leftTime = endtime - now; //时间差    
      // console.log(leftTime)                          
      var d, h, m, s, ms;
      if (leftTime >= 0) {
        d = Math.floor(leftTime / 1000 / 60 / 60 / 24);
        h = Math.floor(leftTime / 1000 / 60 / 60 % 24)+d*24;
        m = Math.floor(leftTime / 1000 / 60 % 60);
        s = Math.floor(leftTime / 1000 % 60);
        ms = Math.floor(leftTime % 1000);
        ms = ms < 100 ? "0" + ms : ms
        s = s < 10 ? "0" + s : s  
        m = m < 10 ? "0" + m : m
        h = h < 10 ? "0" + h : h
        // that.setData({
        //   countdown: d + "：" + h + "：" + m + "：" + s + ":" + ms,
        // })
        // console.log(d + "：" + h + "：" + m + "：" + s + ":" + ms)
        this.d=d;
        this.h=h;
        this.m=m;
        this.s=s;
        // console.log(s)
        //递归每秒调用countTime方法，显示动态时间效果
        setTimeout(this.countTime, 100);
      } else {
        this.countdown=" "
      }
    },
     getComment(){
        this.queS2=false
        let data={};
        data.mp_id=this.info.user.id;
        data.tag_ids=this.selComId;
        data.page=this.currentPage;
        eva_list(data).then(res=>{
            if(res.code==200){ 
              let last_page=res.data.last_page;
              if(this.page==1){
                  this.Comment=res.data.data
              }else{
                  this.Comment=this.Comment.concat(res.data.data)
              }
              if(last_page>this.currentPage){
                this.load1=true
              }else{
                this.load1=false
              }
           }else if(res.code==201){
              this.queS2=true;   
           }
        })
    },
    getInfo(){
      let data={}
      data.id=this.rushid;
      data.user_id=this.user_id;
      rushinfo(data).then(res=>{
        this.info=res.data
        this.startTime=res.data.course_start_time.replace(/-/g, '/');
        // console.log(startTime)
        this.countTime()  
      })
    },
    selCom(data){
      this.Comment=[]
      this.selComId=data.id;
      this.getComment()
    }
  },
  mounted() {
    
  },
  onLoad(options){
     Object.assign(this.$data, this.$options.data())
     this.rushid=options.id;
     wx.getStorageSync("user_info")?this.user_id=wx.getStorageSync("user_info").id:'';
  },
  onShow(){
     this.getInfo()  
  },
  onUnload(){
    
  },
  onReachBottom(){
    if(this.load1){
       this.currentPage++
       this.getComment()
    }
  },
}
</script>
<style  lang="scss">
@import url("~mpvue-wxparse/src/wxParse.css");
  .pin{
     .van-tabs__line {
        background-color:#1A84FB;
     }
     .van-tab--active {
       font-size:14px;
       font-weight:bold;
       color:#333333;
     }
  }
  .buystyle{
    .toBuy{
      background-color:#1A84FB;
      color:#fff;
    }
    .weui-cell{
      font-size: 15px;
      line-height: 1;
    }
     .totalprice{
        font-size:18px;
        font-family:PingFang-SC-Bold;
        font-weight:bold;
        color:rgba(26,132,251,1);
        line-height:18px
     }
  }
  .content{
    padding: 0 15px;
  }
  
</style>
<style scoped lang="scss">
    .yellow{
      width:375px;
      height:34px;
      background:linear-gradient(-90deg,rgba(253,206,128,1),rgba(253,174,41,1));
      line-height:1;
      font-size:14px;
      box-sizing:border-box;
      font-weight:800;
      color:rgba(255,255,255,1);
      .weui-cell__ft{
          color:#fff;
      }
      span{
        font-size:14px;
        font-family:PingFang-SC-Medium;
        font-weight:500;
        color:rgba(51,51,51,1);
      }
    }
    .actpic{
        width:375px;
        height:188px;
        position: relative;
        img{
          width:375px;
          height:188px;
          display: block;
        }
        .report{
            width:25px;
            height:15px;
            display:block;
            position: absolute;
            top: 15px;
            right: 15px;
        }
    }
    .classname{
        font-size:15px;
        font-weight:bold;
        color:rgba(51,51,51,1);
    }
    .price{
      font-size:18px;
      font-weight:500;
      color:rgba(26,132,251,1);
      line-height:18px;
      margin-top: 16px;
      span{
        font-size:12px;
        font-weight:500;
        text-decoration:line-through;
        color:rgba(102,102,102,1);
      }
    }
    .share{
      font-size:11px;
      font-weight:500;
      color:rgba(26,132,251,1);
      line-height:18px;
      text-align:center;
       .shareIcon{
         width:21px;
         height:21px;
       }
    }
    .lian{
      width:375px;
      height:5px;
      background:rgba(244,245,245,1);
    }
    .user{
      padding-top: 20px;
      .thumb{
        position: relative;
        width:55px;
        height:55px;
        margin-right: 14px;
         .avatar{
            width:55px;
            height:55px;
            border:1px solid rgba(26,132,251,1);
            border-radius:50%;
         }
         .grade{
           position: absolute;
           bottom:0;
           right: 0;
           width:15px;
           height:14px;
           
         }
      }
      .nickname{
        font-size:14px;
        font-weight:bold;
        color:rgba(51,51,51,1);
        line-height:18px;
      }
      .toSend{
        width:71px;
        height:27px;
        border:1px solid rgba(102,102,102,1);
        border-radius:5px;
        text-align:center;
        font-size:14px;
        font-weight:500;
        color:rgba(51,51,51,1);
        line-height: 27px;
        margin-right: 10px;
      }
    }
    .adr{
      font-size:14px;
      font-weight:500;
      color:rgba(51,51,51,1);
      line-height:18px;
      -webkit-box-align:center;
      -webkit-align-items:flex-start;
      align-items:flex-start;
    }
    .footer{
      position:fixed;
      bottom:0;
      left:0;
      height:46px;
      right:0;
      border-top: 1px solid #ddd;
      background:#fff;
      .btn{
        -webkit-box-flex:1;
        -webkit-flex:1;
        flex:1;
        text-align:center;
        color: #fff;
        font-size:14px;
        background:rgba(70,183,255,1);
        font-weight:500;
        .prices{
          font-size:16px;
          line-height:46px;
          color: #fff;
        }
      }
      .btn1{
        background:rgba(26,132,251,1);
      }
    }
    .kong{
      height:46px;
    }
</style>
